<template>
  <div class="tab-bar">
    <template v-for="item in tabBars">
      <tab-bar-item
        class="tab-bar-item"
        :key="item.title"
        :path="item.path"
        active-color="var(--theme-color)"
      >
        <div class="icon" slot="icon">
          <i :class="['iconfont', item.icon]" />
        </div>
        <div class="title" slot="title">{{ item.title }}</div>
      </tab-bar-item>
    </template>
  </div>
</template>
<script>
import TabBarItem from './tab-bar-item.vue'
export default {
  components: {
    TabBarItem
  },
  data: () => ({
    tabBars: [
      { title: '首页', icon: 'icon-iconfonthome0', path: '/home' },
      { title: '分类', icon: 'icon-fenlei', path: '/category' },
      { title: '购物车', icon: 'icon-shangcheng', path: '/cart' },
      { title: '我的', icon: 'icon-user', path: '/profile' }
    ]
  })
}
</script>
<style scoped lang="less">
.tab-bar {
  background: white;
  display: flex;
  text-align: center;
  position: sticky;
  bottom: 0px;
  border-top: 1px solid var(--gray-shallow);
  font-size: 12px;
  .tab-bar-item {
    flex: 1;
  }
  .icon {
    padding: 3px 0;
  }
  .title {
    padding: 3px 0 5px 0;
  }
}
</style>
